<template>
  <div>
    <div class="wrap-content">
      <div class="logo">
        <div class="logo-center">
          <span><img src="../assets/picture/logo-miao.png" width="43" height="17"></span>
        </div>
      </div>
      <div class="picture-miao">
        <p>喵抓，好玩的抓娃娃社交工具</p>
        <img src="../assets/picture/download-img.png" width="100%">
      </div>
      <div class="introduce">
        <p>关于我们</p>
        <img class="word" src="../assets/picture/word.png" width="280" height="134">
        <img class="erweima" src="../assets/picture/erweima.png" width="68" height="68">
      </div>
    </div>
    <div class="download">
      <img @click="downloadApp()" src="../assets/picture/download-miao.png" width="126" height="50">
    </div>
  </div>
</template>

<script>
  export default{
    name: 'download',
    data () {
      return {
      }
    },
    created () {
      document.documentElement.style.cssText += ';height: 100%;'
      document.body.style.cssText += ';max-height: 100%; height: 100%; position: fixed; width: 100%; background: #ffffff;'
    },
    methods: {
      downloadApp () {
        return false
      }
    },
    destroyed () {
      document.documentElement.style.cssText += ';height: auto;'
      document.body.style.cssText += ';max-height: auto; height: auto; position: static; width: auto; background: none;'
    }
  }
</script>

<style scope lang="scss">
  .wrap-content{
    max-height: 100%;
    overflow: auto;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .logo{
    height: 28px;
    background: #ffffff;
    .logo-center{
      display: table;
      margin: 0 auto;
      span{
        display: table-cell;
        vertical-align: middle;
        line-height: 28px;
        img{
          vertical-align: middle;
        }
      }
    }
  }
  .picture-miao{
    background: #fdf7de;
    padding-top: 47px;
    p{
      text-align: center;
      color: #e26000;
      font-size: 15px;
    }
  }
  .introduce{
    p{
      font-size: 15px;
      color: #e26000;
      text-align: center;
      margin: 45px 0 28px;
    }
    img{
      display: table;
      margin: 0 auto;
      &.erweima{
        margin: 23px auto 127px;
      }
    }
  }
  .download{
    position: absolute;
    width: 100%;
    padding: 30px 0;
    bottom: 0;
    background: #fdf7de;
    img{
      display: table;
      margin: 0 auto;
    }
  }
</style>
